import style from './bench.less'
import {Link} from 'react-router-dom'
import {useEffect,useState} from 'react'
import {useSelector,useDispatch} from 'umi'
import { Popover ,Popconfirm ,Modal, Button,Input,message} from 'antd'; 
const { TextArea } = Input;

function bench(){
        const [isModalVisible, setIsModalVisible] = useState(false);
        const showModal = () => {
        setIsModalVisible(true);
    };
    const handleOk = () => {
        console.log('遮罩层点击了确定')
    };
    const handleCancel = () => {
        setIsModalVisible(false);
    };
    let benchModelData = useSelector((state)=>state.bench) //拿到bench模块的数据
    let dispatch = useDispatch()       //发送action来修改bench模块的数据
    let articalContent = (<div>
        <iframe style = {{height:'506px',border:'none'}} src="https://blog.wipi.tech/page/msgboard"></iframe>
    </div>)
    useEffect(()=>{
       //请求文章列表
       dispatch({
           type:'bench/getArticalList',
       })
       //请求评论列表
       dispatch({
           type:'bench/getCommentList'
       })
    },[])
    return <div className = {style.bench}>
        <Modal title="回复评论" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
            <TextArea style={{height:'111px'}} placeholder="支持 Markdown" autoSize />
        </Modal>
        <header>
            <p>工作台</p>
            <h3>您好，用户</h3>
            <p>您的角色：访客</p>
        </header>
        <main>
            {/* 导航列表 */}
            <div className={style.nav}>
                <header>快速导航</header>
                <main>
                    <Link to='/article'>文章管理</Link>
                    <Link to='/comment'>评论管理</Link>
                    <Link to='/article/file'>文件管理</Link>
                    <Link to='/article/category'>用户管理</Link>
                    <Link to='/article/category'>访问管理</Link>
                    <Link to='/article/category'>系统设置</Link>
                </main>
            </div>
            {/* 文章列表 */}
            <div className={style.artical}>
                <header>
                    <span>最新文章</span>
                    <Link to='/article/category'>全部文章</Link>
                </header>
                <main>
                    {
                            
                        benchModelData.articalList.length?(benchModelData.articalList[0]).map(item=><div key={item.id}>
                            <a href={`https://admin.blog.wipi.tech/article/editor/${item.id}`}>
                                <img src={item.cover} alt="暂无图片" />
                                <span>{item.title}</span>
                            </a>
                        </div>):<></>
                    }
                </main>
            </div>
            {/* 评论列表 */}
            <div className={style.comment}>
                <header>
                    <span>最新评论</span>
                    <Link to='/article/category'>全部评论</Link>
                </header>
                <main>
                    <ul>
                    {
                        benchModelData.commentList.length?(benchModelData.commentList[0]).map(item=><li>
                            <div>
                                {item.name} 在 <Popover content={articalContent} placement="right" title='页面预览'><a>文章</a></Popover> 评论 <Popover content={<div>{item.content}</div>} title='评论详情-原始内容'><a>查看内容</a></Popover> <span ><span style={{top:'-2px',position:'relative',margin:'0 10px',borderRadius:'3px',width:'6px',height:'6px',background:'gold',display:'inline-block'}}></span>{item.pass?'通过':'未通过'}</span>
                            </div>
                            <div className = {style.handle}>
                                <a href="#" onClick={()=>{message.error('访客无权进行该操作')}}>通过</a><span>|</span> 
                                 <a href="#" onClick={()=>{message.error('访客无权进行该操作')}}>拒绝</a><span>|</span>     
                                 <a href="#" onClick={showModal}>回复</a><span>|</span> 
                                 <Popconfirm title="确定删除这个评论？" okText="确定" cancelText="取消"><a href="#">删除</a></Popconfirm>
                            </div>
                        </li>):<></>
                    }
                    </ul>
                </main>
            </div>
            {/* 底部 */}
            <footer>
                <div>
                    <a style={{color:'#000'}} href="https://github.com/fantasticit/wipi">
                        <svg style={{width:'24px',height:'24px'}} viewBox="64 64 896 896" focusable="false" data-icon="github" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9a127.5 127.5 0 0138.1 91v112.5c.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z"></path></svg>
                    </a>
                </div>
                <div>
                    Copyright  2021 Designed by Fantasticit.
                </div>
            </footer>
        </main>
        
    </div>
}
export default bench